import React from 'react';
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonList,
  IonItem,
  IonLabel,
  IonToggle,
  IonBackButton,
  IonButtons,
  IonIcon,
} from '@ionic/react';
import {
  volumeHigh,
  textOutline,
  shareOutline,
  trashOutline,
} from 'ionicons/icons';
import { useChatStore } from '../store/chat';

const ChatSettingsPage: React.FC = () => {
  const [autoPlay, setAutoPlay] = React.useState(false);
  const { clearHistory, currentService } = useChatStore();

  const handleClearHistory = () => {
    if (window.confirm('确定要清除所有聊天记录吗？')) {
      clearHistory(currentService);
    }
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton defaultHref="/chat" />
          </IonButtons>
          <IonTitle>对话设置</IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonContent>
        <IonList>
          <IonItem>
            <IonIcon icon={volumeHigh} slot="start" />
            <IonLabel>自动播放语音</IonLabel>
            <IonToggle
              checked={autoPlay}
              onIonChange={e => setAutoPlay(e.detail.checked)}
            />
          </IonItem>

          <IonItem button>
            <IonIcon icon={textOutline} slot="start" />
            <IonLabel>字体大小</IonLabel>
          </IonItem>

          <IonItem button>
            <IonIcon icon={shareOutline} slot="start" />
            <IonLabel>分享给好友</IonLabel>
          </IonItem>

          <IonItem button onClick={handleClearHistory} color="danger">
            <IonIcon icon={trashOutline} slot="start" />
            <IonLabel>清除聊天记录</IonLabel>
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>
  );
};

export default ChatSettingsPage;